import React from 'react';
import { useTheme } from '../contexts/ThemeContext';

const TechEffects: React.FC = () => {
  const { currentTheme } = useTheme();

  // 只在科技主题下显示特效
  if (currentTheme.key !== 'tech') {
    return null;
  }

  return (
    <>
      {/* 数字雨背景 */}
      <div className="digital-rain" />
      
      {/* 电路板图案 */}
      <div className="circuit-pattern" />
      
      {/* 全息扫描线 - 已禁用 */}
      {/* <div className="hologram-scan" /> */}
      
      {/* HUD界面元素 */}
      <div className="hud-elements" />
      
      {/* 雷达扫描 */}
      <div className="radar-scan" />
      
      {/* 数据流指示器 */}
      <div className="data-stream" />
      
      {/* 系统状态指示器 */}
      <div className="system-status" />
      
      {/* 角落装饰元素 */}
      <div className="corner-decoration" />
      
      {/* 右下角装饰 */}
      <div 
        className="corner-decoration" 
        style={{ 
          top: 'auto', 
          left: 'auto', 
          bottom: 0, 
          right: 0,
          transform: 'rotate(180deg)'
        }} 
      />
      
      {/* 左下角装饰 */}
      <div 
        className="corner-decoration" 
        style={{ 
          top: 'auto', 
          left: 0, 
          bottom: 0, 
          right: 'auto',
          transform: 'rotate(90deg)'
        }} 
      />
      
      {/* 右上角装饰 */}
      <div 
        className="corner-decoration" 
        style={{ 
          top: 0, 
          left: 'auto', 
          bottom: 'auto', 
          right: 0,
          transform: 'rotate(270deg)'
        }} 
      />
    </>
  );
};

export default TechEffects;
